<template>
    <div>
        <div class="options-wrapper">
            <div class="search">
                <Input v-model="param"
                       placeholder="姓名或手机号"
                       style="width: 200px"
                       class="search-input"
                       :search="true"
                       @on-change="search"
                />
            </div>
            <div class="left-options">
                <Button class="title-option" type="success" @click="add">添加</Button>
                <Button class="title-option" v-if="selectIds.length==0" disabled="">删除</Button>
                <Button class="title-option" type="error" v-else @click="remove">删除</Button>
            </div>
        </div>
        <!--角色编辑-->
        <Table border :columns="columns" :data="data" @on-selection-change="changeSelect">
            <template slot-scope="{row}" slot="action">
                <Button type="primary" size="small" style="margin-right: 15px" @click="edit(row)">编辑</Button>
            </template>
        </Table>
        <feather-form :modal="modal" :modify="modify"/>
    </div>
</template>

<script>
    import FeatherForm from './FeatherForm'

    export default {
        name: "Feather",
        created() {
            this.getList();
        },
        components: {
            FeatherForm
        },
        data() {
            return {
                modal: false,
                modify: '',
                total: 10,
                selectIds: [],
                current: 1,
                param: '',
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        type: 'index',
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'name'
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: "center"
                    }
                ],
                data: []
            }
        },
        methods: {
            changeSelect(e) {
                this.selectIds = [];
                e.forEach(
                    item => this.selectIds.push(item.id)
                );
            },
            getList() {
                this.$api.dictionaryByCode("feather").then(res => {
                    this.data = res;
                })
            },
            add() {
                this.modify = '';
                this.modal = true;
            },
            edit(row) {
                this.modal = true;
                this.modify = row;
            },
            search() {
                this.getList();
            },
            change(num) {
                this.current = num;
                this.getList();
            },
            remove() {
                this.$Modal.confirm({
                    title: '确认删除',
                    onOk: () => {
                        this.$api.userRemoveByIds(this.selectIds)
                            .then(() => {
                                this.$Message.success('删除成功')
                                this.getList();
                                this.selectIds = [];
                            })
                    }
                })
            },
            //关闭编辑框
            cancel() {
                this.modal = false;
                this.getList();
            },
            course(row) {
                this.$router.push({path: 'course', query: row})
            }
        }
    }
</script>

<style scoped>
    .options-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .left-options {
        display: flex;
        align-items: flex-start;
    }

    .title-option {
        display: inline-block;
        margin-right: 10px;
    }
</style>
